<template>
  <div class="bottom-view">
    <div class="view">
      <el-card shadow="hover">
        <template v-solt:header>
          <div class="title-wrapper">关键词搜索</div>
        </template>
        <template>
          <div class="chart-wrapper">
            <div class="chart-inner">
              <div class="chart">
                <div class="chart-title">搜索用户数</div>
                <div class="chart-data">{{ userCounet }}</div>
                <v-chart :options="searchOptionsUser"></v-chart>
              </div>
              <div class="chart">
                <div class="chart-title">搜索量</div>
                <div class="chart-data">{{ searchCoune }}</div>
                <!-- searchOptionsNums -->
                <v-chart :options="searchOptionsUser"></v-chart>
              </div>
            </div>
            <div class="table-wrapper">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column
                  prop="rank"
                  label="排名"
                  width="100"
                ></el-table-column>
                <el-table-column
                  prop="keyword"
                  label="关键字"
                  width="100"
                ></el-table-column>
                <el-table-column
                  prop="count"
                  label="总搜索量"
                ></el-table-column>
                <el-table-column
                  prop="users"
                  label="搜索用户数"
                ></el-table-column>
                <el-table-column
                  prop="range"
                  label="搜索占比"
                ></el-table-column>
              </el-table>
              <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                @current-change="handleCurrentChange"
              ></el-pagination>
            </div>
          </div>
        </template>
      </el-card>
    </div>
    <div class="view">
      <el-card shadow="hover">
        <template>
          <div class="title-wrapper">
            <div class="title">分类销售排行</div>
            <div class="radio-wrapper">
              <el-radio-group v-model="radionSelect" @change="onCategorySelect">
                <el-radio-button label="品类">品类</el-radio-button>
                <el-radio-button label="商品">商品</el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </template>
        <template>
          <div class="chart-wrapper">
            <v-chart :options="categoryOptions"></v-chart>
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import comminDataMixin from '../../mixins/comminDataMixin'
const colors = [
  '#8d7fec',
  '#5085f2',
  '#f8726b',
  '#e7e702',
  '#78f283',
  '#4bc1fc'
]
export default {
  mixins: [comminDataMixin],
  data() {
    return {
      // 搜索用户数
      userCounet: 0,
      searchOptionsUser: {},
      // 搜索量
      searchCoune: 0,
      searchOptionsNums: {},
      tableData: [
        // {
        //   id: 1,
        //   rank: 1,
        //   keyword: '上海',
        //   count: 100,
        //   users: 90,
        //   range: '90%'
        // }
      ],
      toutalData: [], // 缓存分页数据
      total: 0,
      pageSize: 4,
      radionSelect: '品类',
      // 品类
      categoryOptions: {}
      // 商品
    }
  },
  watch: {
    wordCloud() {
      const totalData = []
      this.wordCloud.forEach((item, index) => {
        totalData.push({
          id: index + 1,
          rank: index + 1,
          keyword: item.word,
          count: item.count,
          users: item.user,
          range: `${((item.user / item.count) * 100).toFixed(2)}%`
        })
      })
      this.toutalData = totalData
      this.total = totalData.length
      this.renderTable(1) // 默认显示第一页
      this.userCounet = this.format(totalData.reduce((s, i) => i.users + s, 0))
      this.searchCoune = this.format(totalData.reduce((s, i) => i.count + s, 0))
      this.renderLineChart() // line 波纹图
    },
    category1() {
      this.renderCategoryOptions()
    }
  },
  methods: {
    // 下一页
    handleCurrentChange(val) {
      this.renderTable(parseInt(val))
    },
    renderTable(page) {
      this.tableData = this.toutalData.slice(
        (page - 1) * this.pageSize,
        (page - 1) * this.pageSize + this.pageSize
      )
    },
    renderLineChart() {
      const optionCreate = (key) => {
        const axis = []
        const data = []
        this.wordCloud.forEach((item, index) => data.push(item[key]))
        this.wordCloud.forEach((item, index) => axis.push(item.word))
        return {
          xAxis: {
            type: 'category',
            show: false,
            boundaryGap: false,
            data: axis
          },
          yAxis: {
            show: false
            // min: 0,
            // max: 300 // 超出便捷  限制显示范围
          },
          tooltip: {},
          series: [
            {
              type: 'line',
              data: data,
              smooth: true,
              areaStyle: {
                color: 'rgba(95,187,255,.5)'
              },
              lineStyle: {
                color: 'rgba(95,187,255,0)'
              },
              itemStyle: {
                opacity: 0
              }
            }
          ],
          grid: {
            top: 0,
            bottom: 0,
            left: 0,
            right: 0
          }
        }
      }
      this.searchOptionsUser = optionCreate('user')
      this.searchOptionsNums = optionCreate('count')
    },
    onCategorySelect(type) {
      this.radionSelect = type
      this.renderCategoryOptions()
    },
    renderCategoryOptions() {
      if (!this.category1 || !this.category2) {
        return
      }
      let data = []
      let axis = []
      let total = 0
      if (this.radionSelect === '品类') {
        data = this.category1.data1.slice(0, 6)
        axis = this.category1.axisX.slice(0, 6)
        total = data.reduce((s, i) => s + i, 0)
      } else {
        data = this.category2.data1.slice(0, 6)
        axis = this.category2.axisX.slice(0, 6)
        total = data.reduce((s, i) => s + i, 0)
      }

      // const mockData = [
      //   {
      //     name: '自营业 | 15,40%',
      //     legendname: '自营业',
      //     value: 67,
      //     percent: '15,40%',
      //     itemStyle: {
      //       color: '#8d7fec' // 颜色定制
      //     }
      //   },
      //   {
      //     name: '中高端 | 20,40%',
      //     legendname: '中高端',
      //     value: 77,
      //     percent: '20,40%',
      //     itemStyle: {
      //       color: '#5885f2' // 颜色定制
      //     }
      //   },
      //   {
      //     name: '商旅 | 30,40%',
      //     legendname: '商旅',
      //     value: 34,
      //     percent: '30,40%',
      //     itemStyle: {
      //       color: '#e7e702' // 颜色定制
      //     }
      //   }
      // ]
      const chartData = []
      data.forEach((item, index) => {
        const percent = `${((item / total) * 100).toFixed(2)}%`
        chartData.push({
          legendname: axis[index],
          value: item,
          percent,
          itemStyle: {
            color: colors[index]
          },
          name: `${axis[index]} | ${percent}`
        })
      })
      this.categoryOptions = {
        title: [
          {
            text: `${this.radionSelect}分布`,
            textStyle: {
              fontSize: 14,
              color: '#666'
            },
            left: 20,
            top: 20
          },
          {
            text: '累计订单量',
            subtext: total,
            x: '34.5%',
            y: '44.5%',
            textStyle: {
              fontSize: 14,
              color: '#999'
            },
            subtextStyle: {
              fontSize: 28,
              color: '#333'
            },
            textAlign: 'center'
          }
        ],
        series: [
          {
            name: '品类分布',
            type: 'pie',
            data: chartData,
            label: {
              normal: {
                show: true,
                position: 'outside',
                formatter: function (params) {
                  return params.data.legendname
                }
              }
            },
            center: ['35%', '50%'],
            radius: ['45%', '60%'],
            labelLine: {
              show: true,
              smooth: true,
              length: 5,
              length2: 8
            },
            clockwise: true,
            itemStyle: {
              borderWidth: 4,
              borderColor: '#fff'
            }
          }
        ],
        legend: {
          orient: 'vertical',
          type: 'scroll',
          height: 250,
          left: '70%',
          top: 'middle',
          textStyle: {
            color: '#8e8e8e'
          }
        },
        tooltip: {
          show: true,
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,0.7)',
          borderColor: 'rgba(50,50,50,0)',
          textStyle: {
            color: 'rgba(2550,255,255,.8)'
          },
          formatter: function (params) {
            return `${params.seriesName}<br/>${params.marker}  ${params.data.legendname}<br/>数量：${params.data.value}<br/>占比：${params.data.percent}`
          }
        }
      }
    }
  },
  mounted() {
    // this.renderCategoryOptions()
  }
}
</script>

<style lang="scss" scoped>
.bottom-view {
  display: flex;
  margin-top: 20px;

  .view {
    flex: 1;
    width: 50%;
    box-sizing: border-box;

    &:first-child {
      padding: 0 10px 0 0;
    }

    &:last-child {
      padding: 0 0 0 10px;
    }

    .title-wrapper {
      display: flex;
      align-items: center;
      height: 60px;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      font-size: 14px;
      font-weight: 500;
      padding: 0 0 0 20px;

      .radio-wrapper {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        padding-right: 20px;
      }
    }

    .chart-wrapper {
      display: flex;
      flex-direction: column;
      height: 452px;
      padding: 0 10px;
      margin-top: 20px;

      .chart-inner {
        display: flex;

        .chart {
          flex: 1;
          padding: 0 10px;

          .chart-title {
            color: #999;
            font-size: 14px;
          }

          .chart-data {
            font-size: 22px;
            color: #333;
            font-weight: 500;
            letter-spacing: 2px;
          }

          .echarts {
            height: 50px;
          }
        }
      }
      .table-wrapper {
        flex: 1;
        margin-top: 20px;
        // padding: 0 20px 20px;

        .el-pagination {
          display: flex;
          justify-content: flex-end;
          margin-top: 15px;
        }
      }
    }
  }
}
</style>
